<template lang="pug">
  .area-box
    .components-box
      components-area(ref="componentsArea" :designDeviceChoose="designDeviceChoose")
    multipane.pane-box(layout="vertical")
      .design-box(style="width:calc(100% - 260px);min-width:100px;")
        design-area(:initTemplateInfo="initTemplateInfo" :designDeviceChoose="designDeviceChoose" :treeInitTemplateInfo="treeInitTemplateInfo" :quickCreatePage='quickCreatePage'  ref="designArea")
      multipane-resizer
      .config-box(style="width:260px ;minWidth: 260px;flexGrow: 1")
        config-area(ref="configArea" :commonPageConfig="commonPageConfig" :initTemplateInfo="initTemplateInfo" :designDeviceChoose="designDeviceChoose")

</template>
<script>
// import splitPane from 'vue-splitpane'
import componentsArea from './componentsArea'
import configArea from './configArea'
import designArea from './designArea'
import _ from 'lodash'

import { Multipane, MultipaneResizer } from 'vue-multipane'
export default {
  name: 'operatePageMain',
  props: ['initTemplateInfo', 'designDeviceChoose', 'treeInitTemplateInfo', 'quickCreatePage', 'commonPageConfig'],
  data() {
    return {
      chooseComponentId: undefined,
      optionHoverId: undefined,
      globalConfig: undefined
    }
  },
  provide() {
    return {
      operaTemplateRoot: this,
      componentsArea: this.componentsArea,
      designArea: this.designArea,
      configArea: this.configArea
    }
  },
  components: { componentsArea, configArea, designArea, Multipane, MultipaneResizer },
  methods: {
    componentsArea() {
      return this.$refs.componentsArea
    },
    designArea() {
      return this.$refs.designArea
    },
    configArea() {
      return this.$refs.configArea
    },
    // 子页面切换 回归全局配置
    tabChange() {
      this.configArea().showGlobalConfig()
    },
    // 选中
    selectPluginDefs(val) {
      this.configArea().compontentConfig(val)
    },
    // 保存共享了 告知组件区域
    saveAsSharePlugin() {
      this.componentsArea().getSharePluginDefs()
    },
    // 点击删除，判断右边配置区域是否变成全局配置
    isGlobalConfig(option, id) {
      let componentId = option.config.componentId
      if (componentId === id) {
        this.globalConfig = true
      } else if (option.category === 'layout' && option.config.containers.length > 0) {
        _.forEach(option.config.containers, one => {
          if (one.children && one.children.length > 0) {
            _.forEach(one.children, child => {
              this.isGlobalConfig(child, id)
            })
          }
        })
      } else {
        this.globalConfig = false
      }
    },
    // 删除组件 告知配置区域是否要回到全局配置
    deletePluginDefs(val) {
      if (this.chooseComponentId) {
        this.isGlobalConfig(val, this.chooseComponentId)
        if (this.globalConfig) {
          this.configArea().showGlobalConfig()
        }
      }
    }
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
  .area-box {
    width: 100%;
    height: 100%;
    display: flex;
    background: #fff;
    position: relative;
    .components-box {
      width: 200px;
      height: 100%;

    }
    .design-box {
      // height: 100%;
      // flex: 1;
      // overflow: auto;

      // padding-right:10px;
      // box-sizing: border-box;
      height: 100%;
    }
    .config-box {
      // width: 260px;
      // height: 100%;

      height: 100%;
    }
  }

</style>
<style lang="scss">
.pane-box{
  width: calc(100% - 200px);
  > div{
    z-index:auto!important;
  }
  > .multipane-resizer {
    margin: 0!important;
    left: 0!important;
    position: relative;
    &:before {
      display: block;
      content: "";
      width: 4px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -2px;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
    }
    &:hover {
      &:before {
        border-color: #999;
      }
    }
  }
}

  .plugin-defs-item {
    cursor: move !important;
  }

  .ghost {
    opacity: 0.5 !important;
    background: #c8ebfb !important;
  }

</style>
